<template>
  <div class="home">
    <newsContent :msg="HomeInfo" :list="listInfo" />
    <div class="home_div" ref="homeHeight">
      <dl class="index_dl" v-for="item in listShop" :key="item.pid" @click="btn(item.pid)">
        <dt class="index_dt">
          <img :src="item.pimg" />
        </dt>
        <dd class="index_dd">{{ item.pname }}</dd>
        <dd class="index_dd_price">{{ item.pprice }}</dd>
      </dl>
      <!-- <div>{{runTime}}</div> -->
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import newsContent from "@/components/content.vue";

export default {
  name: "Home",
  components: {
    newsContent
  },
  data() {
    return {
      HomeInfo: "",
      listInfo: "",
      listShop: "",
      // 屏幕高度
      clientHeight: "",
      runTime: ""
    };
  },
  created() {
    this.indexInfo();
    this.indexShop()
  },
  beforeRouteEnter(to, from, next) {
    console.log(from.name)
    if (from.name == "shopdetail") {
      to.meta.canKeep = true;
    } else {
      to.meta.canKeep = false;
    }
    next();
  },
  mounted() {
    this.clientHeight = `${document.documentElement.clientHeight}`;
  },
  watch: {
    //监听clientHeight
    clientHeight: function() {
      this.changeFixed(this.clientHeight);
    }
  },
  methods: {
    changeFixed(clientHeight) {
      this.$refs.homeHeight.style.height = clientHeight - 212 + "px";
    },
    // 轮播图接口
    indexInfo() {
      var that = this;
      this.$axios
        .get("http://dtwkapi.dtveek.com/chamberclassifies")
        .then(function(obj) {
          that.HomeInfo = obj.data.data.firstBanner;
          that.listInfo = obj.data.data.classList;
        });
    },
    // 商品接口
    indexShop() {
      var that = this;
      this.$axios
        .get("http://jx.xuzhixiang.top/ap/api/productlist.php").then(obj => {
          console.log(obj);
          that.listShop = obj.data.data;
        });
    },
    btn(id) {
      this.$axios
        .get("http://jx.xuzhixiang.top/ap/api/add-product.php", {
          params: {
            uid: this.$store.state.token,
            pid: id,
            pnum: 1
          }
        })
        .then(obj => {
          // console.log(obj);
          if (obj.status == 200) {
            this.$layer.msg("加入购物车成功");
          }
        });
      this.$router.push({
        path: "/shopdetail",
        query: {
          id: id
        }
      });
    }
  }
};
</script>
<style scoped>
.home_div {
  width: 95%;
  margin: 2.5%;
  float: left;
  overflow: auto;
}
.index_dl {
  float: left;
  width: 49%;
  margin-right: 2%;
}
.index_dl:nth-of-type(2n) {
  margin-right: 0;
}
.index_dt {
  width: 100%;
  height: 0;
  position: relative;
  padding-bottom: 75%;
}
.index_dt img {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: contain;
}
.index_dd {
  width: 90%;
  margin-left: 5%;
  float: left;
  line-height: 50px;
  text-align: center;
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.index_dd_price {
  width: 90%;
  margin-left: 5%;
  float: left;
  line-height: 10px;
  text-align: left;
  font-size: 15px;
  color: red;
  margin-bottom: 20px;
}
</style>
